<template>
    <div class="right">
        <div class="top">
            <el-breadcrumb separator="/" class="top-el">
                <el-breadcrumb-item>{{listcontent.title}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{listcontent.title1}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="middle">
            <div class="middle-left"><strong>{{listcontent.title1}}</strong></div>
            <el-form ref="form" class="middle-right">
                <el-form-item class="middle-right-input">
                    筛选：
                    <el-select
                    v-model="navcontent.value"
                    multiple
                    filterable
                    allow-create
                    default-first-option>
                    <el-option
                    v-for="item in navcontent.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
            </el-form>
        </div>
        
    </div>
</template>

<script>
export default {
    name:'ListContent',
    props:['listcontent'],
    data(){
        return {
            region: '',//筛选
            navcontent: {
        title: '扩展点列表',
        titleOne: '交易',
        // 下拉框
        options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '微商城单店'
        }, {
          value: '选项3',
          label: '有赞连锁D-总部'
        }, {
          value: '选项4',
          label: '有赞连锁D-网店'
        }, {
          value: '选项5',
          label: '零售单店'
        }, {
          value: '选项6',
          label: '有赞连锁L-总部'
        }, {
          value: '选项7',
          label: '有赞连锁L-总部-高级版'
        }, {
          value: '选项8',
          label: '有赞连锁L-网店'
        }],
        value: ''
      },
        }
    }
}
</script>

<style lang="less" scoped>
.right {
    float: left;
    padding-top: 24px;
    padding-left: 40px;
    width: 900px;
    .top{
      width: 907px;
      height: 44px;
      .top-el{
        line-height:44px;
      }
    }
    .middle{
      width: 907px;
      height: 32px;
      margin: 20px 0;
      .middle-left{
        float: left;
        font-size: 20px;
        vertical-align: baseline;
        font-family: Helvetica,Verdana,Arial,Tahoma,sans-serif;
      }
      .middle-right{
        float: right;
        margin-right: 2px;
        /deep/.middle-right-input input{
          width: 240px;
          height: 32px;
          padding: 0px;
        }
      }
    }
  }
</style>